<template>
    <div class="my-app">
        <div class="content">
            <div class="content-header">
                <el-button class="header-btn" @click="onLoginOut">
                    退出登录
                </el-button>
            </div>
            <div v-loading="loading" class="content-list">
                <el-table
                    :data="filterAppList"
                    style="width: 100%"
                    height="400"
                    size="large"
                    border
                >
                    <el-table-column type="expand">
                        <template #default="props">
                            <div class="list-expand">
                                <el-descriptions :column="2" border>
                                    <el-descriptions-item label="应用ID">
                                        {{ props.row.id }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="历史ID">
                                        {{ props.row.historyId }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="类型">
                                        {{ props.row.type }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="日期">
                                        {{ props.row.date }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="应用名称" width="150" />
                    <el-table-column prop="id" label="应用ID" />
                    <el-table-column fixed="right" align="center" width="220">
                        <template #header>
                            <el-input v-model="searchValue" placeholder="搜索关键词" />
                        </template>
                        <template #default="scope">
                            <div class="action-wrap">
                                <div class="action-btn" @click="onEditApp(scope.row)">编辑</div>
                                <el-divider direction="vertical"></el-divider>
                                <div class="action-btn" @click="onDeleteApp(scope.row.id)">删除</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
import { getAppList, deleteApp } from '@/api/app'
import { openAdmin } from '@/libs/util'
export default {
    name: 'my_app',
    setup() {
        const userStore = useUserStore()
        const router = useRouter()

        const appList = ref([])
        const loading = ref(false)
        const searchValue = ref('')

        const filterAppList = computed(() =>
            appList.value.filter(
                (data) => !searchValue.value
                    || data.name.toLowerCase().includes(searchValue.value.toLowerCase())
            )
        )

        const getList = () => {
            loading.value = true
            getAppList().then(res => {
                if (res.Status === 1) {
                    const list = res.Data || []
                    appList.value = list.map(item => ({
                        name: item.Name,
                        id: item.Id,
                        historyId: item.HistoryId,
                        date: item.CreatedAt,
                        type: item.Type
                    }))
                } else {
                    ElNotification({
                        title: '提示',
                        message: '获取应用列表失败',
                        type: 'error'
                    })
                }
            }).finally(() => {
                loading.value = false
            })
        }
        getList()

        const onEditApp = data => {
            const { href } = router.resolve({
                name: 'edit',
                params: {
                    appId: data.id
                }
            })
            window.open(href, '_blank')
        }

        const onDeleteApp = id => {
            ElMessageBox.confirm('确定删除该应用?', '提示', {
                type: 'warning',
            }).then(() => {
                loading.value = true
                deleteApp(id).then(res => {
                    if (res.Status === 1) {
                        getList()
                        ElMessage({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else {
                        ElMessage({
                            message: '删除失败',
                            type: 'warning'
                        })
                    }
                }).finally(() => {
                    loading.value = false
                })
            }).catch(() => {})
        }

        const onLoginOut = () => {
            userStore.loginOut()
            router.go(0)
        }

        return {
            loading,
            searchValue,
            filterAppList,
            onEditApp,
            onDeleteApp,
            onLoginOut
        }
    }
}
</script>

<style lang="less" scoped>
.my-app {
    width: 100%;
    height: 100%;
    background-color: var(--edit-color-primary-light-9);
    position: relative;
    .content {
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, 0);
        width: 700px;
        .content-header {
            display: flex;
            align-items: center;
            .header-btn {
                .el-icon {
                    margin-right: 5px;
                }
            }
        }
        .content-list {
            margin-top: 20px;
            .list-expand {
                padding: 10px 20px 10px 48px;
                ::v-deep(.is-bordered-label) {
                    width: 120px;
                }
            }
            .action-wrap {
                display: flex;
                align-items: center;
                justify-content: center;
                .action-btn {
                    color: var(--edit-color-primary);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>